<template>
  <template v-for="item in menu">
    <el-menu-item v-if="validatenull(item[childrenKey]) && validRoles(item)" :key="item[labelKey]"
      :index="getPath(item)" @click="open(item)">
      <i :class="item[iconKey]"></i>
      <template #title>
        <span :alt="item[pathKey]">{{ getTitle(item) }}</span>
      </template>
    </el-menu-item>
    <el-sub-menu v-else-if="!validatenull(item[childrenKey])&&validRoles(item)" :key="item[labelKey]"
      :index="getPath(item)">
      <template #title>
        <i :class="item[iconKey]"></i>
        <span>{{ getTitle(item) }}</span>
      </template>
      <template v-for="(child,cindex) in item[childrenKey]">
        <template v-if="child.visible=='0'">
          <el-menu-item v-if="validatenull(child[childrenKey]) && child.visible==='0' " :key="cindex"
            :index="getPath(child)" @click="open(child)">
            <i :class="child[iconKey]"></i>
            <template #title>
              <span>{{ getTitle(child) }}</span>
            </template>
          </el-menu-item>
          <sidebar-item v-else :key="cindex + 1" :menu="[child]"></sidebar-item>
        </template>

      </template>
    </el-sub-menu>
  </template>
</template>
<script>
import { mapGetters } from 'vuex'
import { validatenull } from '@/util/validate'
import website from '@/config/website'

export default {
  name: 'sidebarItem',
  data () {
    return {
      props: website.menu
    }
  },
  props: {
    menu: {
      type: Array,
      default: null
    }
  },
  computed: {
    ...mapGetters(['roles']),
    labelKey () {
      return this.props.label
    },
    pathKey () {
      return this.props.path
    },
    queryKey () {
      return this.props.query
    },
    iconKey () {
      return this.props.icon
    },
    childrenKey () {
      return this.props.children
    },
    metaKey () {
      return this.props.meta
    },
    nowTagValue () {
      return this.$route.path
    }
  },
  mounted () {

  },
  methods: {
    getPath (item) {
      return item[this.pathKey] + ''
    },
    getTitle (item) {
      return this.$router.$avueRouter.generateTitle(
        item[this.labelKey],
        item.meta.i18n
      )
    },
    validRoles (item) {
      item.meta = item.meta || {}
      return item.meta.roles ? item.meta.roles.includes(this.roles) : true
    },
    validatenull (val) {
      return validatenull(val)
    },
    open (item) {
      this.$router.push({
        path: item[this.pathKey],
        query: item[this.queryKey]
      })
    }
  }
}
</script>

